<script setup>
  import { ref } from 'vue'
  defineProps({
    msg: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      required: false,
      default (){
        return []
      }
    }
  })
  
  const count = ref(0)
  </script>
  
  <template>
    <div class="w-full h-auto self-center bg-no-repeat pt-[120px] mobile:px-6 mobile:pt-[80px] z-[1] overflow-y-auto">
        <div class="flex mb-[80px] items-center mobile:mb-12">
            <span class="wen-index-title flex-auto">新闻中心</span>
            <div class="text-2xl font-medium leading-10 float-right mobile:hidden"><span class="">查看全部</span>
              <div class="inline-block w-4 ml-1">
                  <img class="wen-ico-item translate-y-0.5" src="/src/assets/fa_angle_right_black_60.svg" alt="">
              </div>
            </div>
        </div>
        <div class="flex ilmobile:hidden">
          <img class="w-full" :src="data[0]?.cn_single_pic" alt="" srcset="">
        </div>
        <div class="flex bg-undergray px-16 py-10 mobile:px-4 mobile:py-6 wen-news-card-bgi relative mobile:before:hidden wow animate__animated animate__fadeInUp timing">
            <div class="w-1/2 flex-auto" >
                <p class="w-full text-undercolor2">
                    <span class="text-7xl py-2 mobile:hidden">09</span><p class="text-2xl mobile:text-xl">{{data[0]?.Ymd}}</p>
                </p>
                <h3 class="text-3xl text-dominant my-8 font-bold mobile:text-2xl mobile:my-3"><a :href="data[0]?.url">{{ data[0]?.title }}</a></h3>
                <p class="text-xl leading-relaxed text-gray3 w-1/2 mobile:w-full line-clamp-2 mobile:text-sm"><a :href="data[0]?.url" v-html="data[0]?.cn_content"></a></p>
                <div class="my-16 leading-10 font-bold flex items-center mobile:mt-6 mobile:mb-0"><span class="text-2xl text-gray3 mobile:text-lg">查看详情</span> 
                    <div class="inline-block w-10 ml-1">
                        <img class="wen-ico-item" src="/src/assets/fa_angle_right_black.svg" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full self-center mx-auto mt-[80px] mobile:my-6 wow animate__animated animate__fadeInUp timing">
            <ul class="w-full grid grid-rows-1 mobile:grid-rows-5 grid-flow-col gap-4 justify-items-center ">
                <li v-for="(item, index) in data?.slice?.(1)" class="w-full active px-6 mobile:px-4 border-l-2 border-white/40 border-inside newsCell ">
                    <p class="text-white/40 text-xl font-bold mobile:text-sm leading-none pb-2 mobile:text-white/60">2024-03-10</p>
                    <h3 class="line-clamp-3 h-24 text-2xl mt-6 mobile:text-white mobile:mt-0 mobile:text-base mobile:h-auto mobile:line-clamp-2" ><a class="text-white/80" :href="item?.url">{{ item.title }}</a></h3>
                    <div class="mt-4 leading-10 text-white/60 mobile:hidden"><span class="text-base ">查看详情</span>
                        <div class="inline-block w-4 ml-1">
                            <img class="wen-ico-item translate-y-0.5" src="/src/assets/fa_angle_right_2.svg" alt="">
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
  </template>
  <style scoped>
  .newsCell:hover p, .newsCell:hover span{
    color: rgb(255 255 255 / 0.8) !important;
  }
  .newsCell:hover h3>a{
    color: white !important;
  }
  </style>
  